<template>
    <div class="block">
        <!-- <div v-if="!dataEmpty" class="progress-line box">
            <div v-for="(item, index) in progress" :class="{act: index === nowProgressIndex}"  class="item box-f1 box-ver box-pc box-fh box-ac">
                <div class="top box box-pc box-ac">
                    <div :class="{bor0: index===0}" class="bor left box-f1"></div>
                    <div class="round"></div>
                    <div :class="{bor0: index===4}" class="bor right box-f1"></div>
                </div>
                <div class="text">{{item}}</div>
            </div>
        </div> -->
        <div v-if="!dataEmpty" class="progress box box-ver">
            <div v-if="data.currentProcStr" class="act progress-current progress-item box">
                <div class="box box-ver date">
                </div>
                <div class="box box-ver box-ac box-pc round-line">
                    <div class="line-t box-f1"></div>
                    <div class="round box box-ac box-pc">
                        <div class="center"></div>
                    </div>
                    <div :class="{hide1: data.t.length === 0}" class="line-b box-f1"></div>
                </div>
                <div class="detail box box-ver box-f1 bc-fff tc-999">
                    <div class="arrow"></div>
                    <div class="icon-call box-img"></div>
                    <div class="">{{data.currentProcStr}}</div>
                </div>
            </div>
            <div class="progress-list" v-for="(item, index) in data.t">
                <div v-if="index === indexFK" class="progress-item box">
                    <div class="box box-ver date"></div>
                    <div class="box box-ver box-ac box-pc round-line">
                        <div class="line-t box-f1"></div>
                        <div class="line-b box-f1"></div>
                    </div>
                    <div class="box box-f1 title">
                        共享审批
                    </div>
                </div>
                <div :class="{'act': index===0 && !data.currentProcStr}" class="progress-item box">
                    <div class="box box-ver date">
                        <div class="top">
                            <span class="day">{{item.time.split(' ')[0].split('-')[2]}}</span>
                            <span class="month">{{item.time.split(' ')[0].split('-')[1]}}</span>月
                            <span class="time">{{item.time.split(' ')[1].substring(0, 5)}}</span>
                        </div>
                        <div>{{item.time.split(' ')[0].split('-')[0]}}</div>
                        <div>{{getHour(index)}}</div>
                    </div>
                    <div class="box box-ver box-ac box-pc round-line">
                        <div class="line-t box-f1"></div>
                        <div class="round box box-ac box-pc">
                            <div class="center"></div>
                        </div>
                        <div class="line-b box-f1"></div>
                    </div>
                    <div class="detail box box-ver box-f1 bc-fff tc-999">
                        <div class="arrow"></div>
                        <div class="">{{item.proc}}</div>
                        <div class="fon-s24 mag-t32">经办人：<span>{{item.operator}}</span></div>
                        <div class="fon-s24 mag-t16">{{(!item.str || item.str.indexOf('null') > -1) ? '无审批意见' : item.str}}</div>
                    </div>
                </div>
                <div v-if="index === indexYJ" class="progress-item box">
                    <div class="box box-ver date"></div>
                    <div class="box box-ver box-ac box-pc round-line">
                        <div class="line-t box-f1"></div>
                        <div class="line-b box-f1"></div>
                    </div>
                    <div class="box box-f1 title">
                        一线审批
                    </div>
                </div>
            </div>
        </div>
        <empty :flag="dataEmpty" :text="'没有符合条件的数据'"></empty>
    </div>
</template>

<script>
    import empty from '../components/empty.vue';

    export default {
        components: {
            empty
        },
        props: ['process'],
        data () {
            return {
                nowProgressIndex: -1,
                progress: [
                    '一级审批',
                    '共享审批',
                    '最终审批',
                    '待付款',
                    '已完结'
                ],
                data: '',
                indexYJ: null,
                indexFK: null,
                dataEmpty: false
            };
        },
        methods: {
            getHour (index) {
                let len = this.data.t.length;
                let t1 = this.data.t[index].time.replace(/-/g, '/');
                let t2;
                if (index === len - 1) {
                    return '';
                } else {
                    t2 = this.data.t[index + 1].time.replace(/-/g, '/');
                }
                let cutTime = new Date(t1).getTime() - new Date(t2).getTime();
                return `停留${(cutTime / (3600 * 1000)).toFixed(0)}小时`;
            },
            // 用一级审批来划分
            initData () {
                // let nowPro = this.data.t[0] || {};
                // if (nowPro.proc && nowPro.proc.indexOf('提交付款') > -1 && this.data.currentProcStr.indexOf('流程已') > -1) {
                //     this.nowProgressIndex = 4;
                // } else if (nowPro.proc && nowPro.proc.indexOf('提交付款') > -1 && this.data.currentProcStr.indexOf('流程已') === -1) {
                //     this.indexFK = 3;
                // } else if (nowPro.proc && nowPro.proc.indexOf('一级审批') > -1) {
                //     this.indexFK = 1;
                // } else if (nowPro.proc && nowPro.proc.indexOf('最终审批') > -1) {
                //     this.indexFK = 2;
                // } else {
                //     this.nowProgressIndex = 0;
                // }
                // if (this.data.currentProcStr && this.data.currentProcStr.indexOf('流程已') > -1) {
                //     this.nowProgressIndex = 4;
                // }
                this.data.t.forEach((item, index) => {
                    console.log(index);
                    if (item.proc.indexOf('一级审批') > -1) {
                        this.indexYJ = index;
                        this.indexFK = index;
                    }
                    if (item.proc.indexOf('最终审批') > -1) {
                        this.indexFK = index;
                    }
                    // if (item.proc.indexOf('提交付款') > -1) {
                    //     this.indexFK = index;
                    // }
                    // if (item.proc.indexOf('付款') > -1) {
                    //     this.indexFK = index;
                    // }
                });
            }
        },
        created() {
            this.data = this.process;
            if (this.data.t.length > 0 || this.data.currentProcStr) {
                this.initData();
            } else {
                this.dataEmpty = true;
            }
        }
    };
</script>

<style lang="less" scoped src="../css/timeline.less"></style>
<style lang="less" scoped>
    @import "../css/var.less";

    .block {
        padding-top: .3rem;
        padding-bottom: .3rem;
        min-height:100%;
        background-color:#FFF;
    }
    .progress{
        padding-top:.3rem;
    }
    .progress-line{
        padding:.3rem .2rem;
        background-color:#F2F2F2;
        color:#999;
        font-size:.26rem;
        .item{
            .top{
                height:.4rem;
            }
            .bor{
                border-top:1px solid #bababa;
            }
            .round{
                width:.3rem;
                height:.3rem;
                border-radius:50%;
                background-color:rgba(0,0,0,0);
                background-color:#bababa;

            }
            .text{
                padding-top:.2rem;
                text-align: center;
            }
            &.act{
                .round{
                    background-size:100% 100%;
                    width:.4rem;
                    height:.4rem;
                    background-color:#FFF;
                    background-image: url(../img/icon-check.png);
                }
            }
        }
    }
    .bor0{
        border-top:1px solid rgba(0,0,0,0) !important;
    }
    .progress-item {
        margin: 0 .25rem;
        .date {
            width:2.2rem;
            padding-top:0.3em;
            font-size:.28rem;
            color:#999;
            .top{
                font-weight:700;
                color:#000;
            }
            .day{
                font-size:.36rem;
            }
        }
        .round-line{
            width:.6rem;
            .line-t{
                border-right:1px solid #bababa;
            }
            .line-b{
                border-right:1px solid #bababa;
            }
            .round{
                width:1em;
                height:1em;
                border-radius:50%;
                background-color:rgba(0,0,0,0);
                background-color:#bababa;
            }
        }
        .title{
            color:#000;
            font-size:.36rem;
            font-weight: 700;
            margin-bottom:.2rem;
        }
        .detail{
            border-radius:.5em;
            padding:.875em;
            margin-bottom:.3rem;
            color:#999;
            background-color:#F2F2F2;
        }
    }
    .progress-current .round-line .line-t{
        border-right:1px solid rgba(0,0,0,0);
    }

    .progress-current .round-line .line-b.hide1{
        border-right:1px solid rgba(0,0,0,0);
    }

    .progress-list:last-child{
        .line-b{
            border-right:1px solid rgba(0,0,0,0);
        }
    }

    .progress-item.act .round{
        width:1.2em;
        height:1.2em;
        background-color:rgba(60,150,240,.2)
    }
    .progress-item.act .round .center{
        border-radius:50%;
        width:.8em;
        height:.8em;
        background: @theme-color;
    }
    .progress-item.act .detail{
        background: @theme-color;
        color:#FFF
    }
</style>
